import 'dart:ffi';

import 'package:flutter/material.dart';

//ListView列表组件
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //是否显示debug标识
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

//实现类似头条顶部导航
//1. 混入SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  //2. 定义TabController
  TabController? _tabController;
  @override
  //生命周期函数：当组件初始化的时候触发
  void initState() {
    super.initState();
    _tabController = TabController(length: 9, vsync: this);
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          //左侧按钮
          onPressed: () {
            print('左侧按钮');
          },
          icon: Icon(Icons.menu),
        ),
        centerTitle: true,//居中标题
        title: Text('头条滑动导航'),
        backgroundColor: Colors.red, //背景颜色
        actions: [
          //右侧按钮
          IconButton(
            onPressed: () {
              print('右侧按钮 -- 搜索');
            },
            icon: Icon(Icons.search),
          ),
          IconButton(
            onPressed: () {
              print('右侧按钮 -- 更多');
            },
            icon: Icon(Icons.more_horiz),
          ),
        ],
        bottom: TabBar(
          isScrollable: true, //滚动
          indicatorColor: Colors.white, //指示器颜色
          indicatorWeight: 2, //指示器高度
          indicatorPadding: EdgeInsets.all(5), //指示器内边距
          indicator: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(10),
          ),//指示器样式
          indicatorSize: TabBarIndicatorSize.tab,//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
          labelColor: Colors.green,
          labelStyle: TextStyle(fontSize: 20),
          unselectedLabelColor: Colors.white,
          unselectedLabelStyle: TextStyle(fontSize: 16),
          controller: _tabController,
          tabs: [
            Tab(child: Text('关注')),
            Tab(child: Text('热门')),
            Tab(child: Text('视频')),
            Tab(child: Text('关注')),
            Tab(child: Text('热门')),
            Tab(child: Text('视频')),
            Tab(child: Text('关注')),
            Tab(child: Text('热门')),
            Tab(child: Text('视频')),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(
            children: [
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
              ListTile(title: Text('我是关注列表')),
            ],
          ),
          ListView(children: [ListTile(title: Text('我是热门列表'))]),
          ListView(children: [ListTile(title: Text('我是视频列表'))]),
          ListView(children: [ListTile(title: Text('我是热门列表'))]),
          ListView(children: [ListTile(title: Text('我是视频列表'))]),
          ListView(children: [ListTile(title: Text('我是热门列表'))]),
          Text('我是底部导航1'),
          Text('我是底部导航2'),
          Text('我是底部导航3'),
        ],
      ),
    );
  }
}
